import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta
  title="Doc for developers/Add CSS classes"
/>

# Add Tailwind classes

This project is based on Tailwind CSS and the `JIT` mode is activated. Per default a minimal amount of classes are generated. You may want to add additional Tailwind classes to your project, to create a specific custom grid, or a new component for example. Two options:

## A. Create your own Vue component
You can create a new vue component in the `./app/components/ch/` folder. If you use official Tailwind classes, they won't be purged and put in the final CSS file. Run `npm run build-css` to generate the desired `dist/main.css` file.

If you want to use non Tailwind class names, you have to insert them in the postcss file structure.
- run `npm run:dev` to launch the application or
- run `npm run:storybook`to test your new component
Adapt the `./css/` folder and be sure to respect the [BEM nomenclature](http://getbem.com/).


## B. Safelist your classes
You can write manually the missing Tailwind classes in the `./safelist.txt` file. This way, the classes won't be purged. Then run `npm run build-css`to generate the desired `dist/main.css` file.
